IM 通信协议-WebSocket

前几天讲解过 Socket 的相关知识，但是在查找资料后看到 IM zhong还有其他的相关协议。今天小编就讲解其他的协议：WebSocket。

之所以研究 WebSocket 原因是相比较与 Socket，WebSocket可以是 server 端向 client 进行信息发送，不需要 client 为获取信息而采用长期轮询方式来获取信息。

WebSocket 简介

起源

WebSocket 是一种在单个TCP连接上进行全双工通讯的协议。通信协议于 2011 年被 IETF 定为标准 RFC 6455，并由 RFC7936 补充规范。

目前浏览器对服务器的访问发送 HTTP 请求，然后由服务器返回最新的数据给客户端的浏览器。但是网站如果要实现推送技术，就需要采用轮询。但是这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

而比较新的技术去做轮询的效果是 Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在 Comet 中，普遍采用的长链接，也会消耗服务器资源。而 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

Websocket 使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket 协议使用 80 端口；运行在 TLS 之上时，默认使用 443 端口。

轮询和WebSocket查询

下面展示初始轮询和优化版长轮询方式以及 WebSocket 信息传递结构图

  • 初始轮询结构图

c3bbs290ff12b9094e57e6044be0149cd.png
【图片来源于网络】

由上图可以看出：

在初始轮询过程中每次进行数据访问都要执行数据访问申请。但是这种方式不适合做轮询，因为这样需要 client 每个一段时间就会向 server 发起请求。这样就会每次请求都会包含 HTTP 的 Header hui增加流量，也会消耗 GPU。

  • 优化长轮询结构图

cd3b018a9ea023d27da715002445d806.png
【图片来源于网络】

由上图可以看出：

此方法是对轮询的改进版本，client 发送 HTTP 给 server 后，如果没有得到新的消息，就会处于等地状态。当有消息才会返回信息给 client。这样在一定的程度上可以减轻宽带的压力和 GPU 的消耗。
但是这样有个弊端：如果在聊天过程中 server 在不断更新，这样 client 必须要等到下一次请求才能够发送消息。client 显示实时数据最快的时间为2×RTT（往返时间），而且如果在网络拥塞的情况下，这个时间用户是不能接受的。

  • WebSocket 轮询方式

9e7b0cb6029cd4028ab8cfcc73c078ba.png
【图片来源于网络】

由上图可以看出：

Websocket 和 轮询方式 Polling 的区别，从图中可以看到 Polling 里 client 发送了好多 Request，而下图，只有一个 Upgrade，非常简洁高效。

为解决协议的头部没有 HTTP 的 Header 和 能支持客户端和服务器端的双向通信，Websocket 就诞生了！

WebSocket协议原理

WebSocket的实现分为：握手、数据发送/读取 和 关闭连接。

Websocket 是第七层上应用层的一个应用层协议，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。

Websocket 的数据传输是 frame 形式传输的，比如会将一条消息分为几个 frame，按照先后顺序传输出去。这样做会有几个好处：

1) 大数据的传输可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况。
2) 和 http 的 chunk 一样，可以边生成数据边传递消息，即提高传输效率。

  • 握手

握手需要从请求头理解。

WebSocket 首先发起一个 HTTP 请求，在请求头加上 Upgrade 字段，该字段用于改变 HTTP 协议版本或者是换用其他协议，这里我们把 Upgrade 的值设为 websocket ，将它升级为 WebSocket 协议。

同时要注意 Sec-WebSocket-Key 字段，它由客户端生成并发给服务端，用于证明服务端接收到的是一个可受信的连接握手，可以帮助服务端排除自身接收到的由非 WebSocket 客户端发起的连接，该值是一串随机经过 base64 编码的字符串。

1
2
3
4
5
6
7
8
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket //添加的Upgrade
Connection: Upgrade //采用的链接方式
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== //在客户端生成
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

我们可以简化请求头，将请求以字符串方式发送出去，当然别忘了最后的两个空行作为包结束：

1
2
3
4
5
6
7
8
9
10
11
12
const char * fmt = "GET %s HTTP/1.1\r\n"
"Upgrade: websocket\r\n"
"Connection: Upgrade\r\n"
"Host: %s\r\n"
"Sec-WebSocket-Key: %s\r\n"
"Sec-WebSocket-Version: 13\r\n"
"\r\n";
size = strlen(fmt) + strlen(path) + strlen(host) + strlen(ws->key);
buf = (char *)malloc(size);
sprintf(buf, fmt, path, host, ws->key);
size = strlen(buf);
nbytes = ws->io_send(ws, ws->context, buf, size);

收到请求后，服务端也会做一次响应：

1
2
3
4
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

里面重要的是 Sec-WebSocket-Accept ，服务端通过从客户端请求头中读取 Sec-WebSocket-Key 与一串全局唯一的标识字符串（俗称魔串）“258EAFA5-E914-47DA- 95CA-C5AB0DC85B11” 做拼接，生成长度为 160 位的 SHA-1字符串，然后进行 base64 编码，作为 Sec-WebSocket-Accept 的值回传给客户端。

处理握手 HTTP 响应解析的时候，可以用 nodejs 的 http-paser ，解析方式也比较简单，就是对头信息的逐字读取再处理，具体处理你可以看一下它的状态机实现。解析完成后你需要对其内容进行解析，看返回是否正确，同时去管理你的握手状态。

  • 数据发送/读取

数据的处理就要拿这个帧协议图来说明了如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+

1)数据发送:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
void ws__wrap_packet(_WS_IN websocket_t *ws,
_WS_IN const char *payload,
_WS_IN unsigned long long payload_size,
_WS_IN int flags,
_WS_OUT char** out,
_WS_OUT uint64_t *out_size) {
 
struct timeval tv;
char mask[4];
unsigned int mask_int;
unsigned int payload_len_bits;
unsigned int payload_bit_offset = 6;
unsigned int extend_payload_len_bits, i;
unsigned long long frame_size;
 
const int MASK_BIT_LEN = 4;
 
gettimeofday(&tv, NULL);
srand(tv.tv_usec * tv.tv_sec);
mask_int = rand();
memcpy(mask, &mask_int, 4);
 
/**
* payload_len bits
* ref to https://tools.ietf.org/html/rfc6455#section-5.2
* If 0-125, that is the payload length
*
* If payload length is equals 126, the following 2 bytes interpreted as a
* 16-bit unsigned integer are the payload length
*
* If 127, the following 8 bytes interpreted as a 64-bit unsigned integer (the
* most significant bit MUST be 0) are the payload length.
*/
if (payload_size 125) {
// consts of ((fin + rsv1/2/3 + opcode) + payload-len bits + mask bit len + payload len)
extend_payload_len_bits = 0;
frame_size = 1 + 1 + MASK_BIT_LEN + payload_size;
 
payload_len_bits = payload_size;
} else if (payload_size > 125 && payload_size 0xffff) {
extend_payload_len_bits = 2;
// consts of ((fin + rsv1/2/3 + opcode) + payload-len bits + extend-payload-len bites + mask bit len + payload len)
frame_size = 1 + 1 + extend_payload_len_bits + MASK_BIT_LEN + payload_size;
payload_len_bits = 126;
 
payload_bit_offset += extend_payload_len_bits;
} else if (payload_size > 0xffff && payload_size 0xffffffffffffffffLL) {
extend_payload_len_bits = 8;
// consts of ((fin + rsv1/2/3 + opcode) + payload-len bits + extend-payload-len bites + mask bit len + payload len)
frame_size = 1 + 1 + extend_payload_len_bits + MASK_BIT_LEN + payload_size;
payload_len_bits = 127;
payload_bit_offset += extend_payload_len_bits;
} else {
if (ws->error_cb) {
ws_error_t *err = ws_new_error(WS_SEND_DATA_TOO_LARGE_ERR);
ws->error_cb(ws, err);
free(err);
}
return ;
}
 
*out_size = frame_size;
char *data = (*out) = (char *)malloc(frame_size);
char *buf_offset = data;
 
bzero(data, frame_size);
*data = flags & 0xff;
 
buf_offset = data + 1;
 
// set mask bit = 1
*(buf_offset) = payload_len_bits | 0x80; //payload length with mask bit on
 
buf_offset = data + 2;
if (payload_len_bits == 126) {
payload_size &= 0xffff;
} else if (payload_len_bits == 127) {
payload_size &= 0xffffffffffffffffLL;
}
 
for (i = 0; i
*(buf_offset + i) = *((char *)&payload_size + (extend_payload_len_bits - i - 1));
}
 
 
/**
* according to https://tools.ietf.org/html/rfc6455#section-5.3
*
* buf_offset is set to mask bit
*/
buf_offset = data + payload_bit_offset - 4;
for (i = 0; i 4; i++) {
*(buf_offset + i) = mask[i] & 0xff;
}
 
/**
* mask the payload data
*/
buf_offset = data + payload_bit_offset;
memcpy(buf_offset, payload, payload_size);
mask_payload(mask, buf_offset, payload_size);
}
 
void mask_payload(char mask[4], char *payload, unsigned long long payload_size) {
unsigned long long i;
for(i = 0; i
*(payload + i) ^= mask[i % 4] & 0xff;
}
}

2)数据解析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
int ws_recv(websocket_t *ws) {
if (ws->state
return ws_do_handshake(ws);
}
 
int ret;
while(true) {
ret = ws__recv(ws);
if (ret != OK) {
break;
}
}
 
return ret;
}
 
int ws__recv(websocket_t *ws) {
if (ws->state
return ws_do_handshake(ws);
}
 
int ret = OK, i;
int state = ws->rd_state;
char *rd_buf;
 
switch(state) {
case WS_READ_IDLE: {
ret = ws__make_up(ws, 2);
if (ret != OK) {
return ret;
}
 
ws_frame_t * frame;
if (ws->c_frame == NULL) {
ws__append_frame(ws);
}
frame = ws->c_frame;
rd_buf = ws->buf;
frame->fin = (*(rd_buf) & 0x80) == 0x80 ? 1 : 0;
frame->op_code = *(rd_buf) & 0x0fu;
frame->payload_len = *(rd_buf + 1) & 0x7fu;
 
if (frame->payload_len 126) {
frame->payload_bit_offset = 2;
ws->rd_state = WS_READ_PAYLOAD;
} else if (frame -> payload_len == 126) {
frame->payload_bit_offset = 4;
ws->rd_state = WS_READ_EXTEND_PAYLOAD_2_WORDS;
} else {
frame->payload_bit_offset = 8;
ws->rd_state = WS_READ_EXTEND_PAYLOAD_8_WORDS;
}
 
ws__reset_buf(ws, 2);
break;
}
case WS_READ_EXTEND_PAYLOAD_2_WORDS: {
#define PAYLOAD_LEN_BITS 2
ret = ws__make_up(ws, PAYLOAD_LEN_BITS);
if (ret != OK) {
return ret;
}
rd_buf = ws->buf;
ws_frame_t * frame = ws->c_frame;
 
char *payload_len_bytes = (char *)&frame->payload_len;
for (i = 0; i
*(payload_len_bytes + i) = rd_buf[PAYLOAD_LEN_BITS - 1 - i];
}
 
ws__reset_buf(ws, PAYLOAD_LEN_BITS);
ws->rd_state = WS_READ_PAYLOAD;
#undef PAYLOAD_LEN_BITS
break;
}
case WS_READ_EXTEND_PAYLOAD_8_WORDS: {
#define PAYLOAD_LEN_BITS 8
ret = ws__make_up(ws, PAYLOAD_LEN_BITS);
if (ret != OK) {
return ret;
}
 
rd_buf = ws->buf;
ws_frame_t * frame = ws->c_frame;
char *payload_len_bytes = (char *)&frame->payload_len;
for (i = 0; i
*(payload_len_bytes + i) = rd_buf[PAYLOAD_LEN_BITS - 1 - i];
}
 
ws__reset_buf(ws, PAYLOAD_LEN_BITS);
ws->rd_state = WS_READ_PAYLOAD;
#undef PAYLOAD_LEN_BITS
break;
}
case WS_READ_PAYLOAD: {
ws_frame_t * frame = ws->c_frame;
uint64_t payload_len = frame->payload_len;
ret = ws__make_up(ws, payload_len);
if (ret != OK) {
return ret;
}
 
 
rd_buf = ws->buf;
frame->payload = malloc(payload_len);
memcpy(frame->payload, rd_buf, payload_len);
 
ws__reset_buf(ws, payload_len);
 
if (frame->fin == 1) {
// is control frame
ws__dispatch_msg(ws, frame);
ws__clean_frame(ws);
} else {
ws__append_frame(ws);
}
 
ws->rd_state = WS_READ_IDLE;
 
break;
}
}
 
return ret;
}
  • 关闭连接

关闭连接分为两种：

(1)服务端发起关闭;
(2)客户端主动关闭。

服务端跟客户端的处理基本一致，以服务端为例：

服务端发起关闭的时候，xiang客户端发送一个关闭帧，客户端在接收到帧的时候通过解析出帧的opcode来判断是否是关闭帧，然后同样向服务端再发送一个关闭帧作为回应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (op_code == OP_CLOSE) {
int status_code;
char *reason;
char *status_code_buf = (char *)&status_code;
status_code_buf[0] = payload[1];
status_code_buf[1] = payload[0];
reason = payload + 2;
 
if (ws->state != WS_STATE_CLOSED) {
/**
* should send response to remote server
*/
 
ws_send(ws, NULL, 0, OP_CLOSE | FLAG_FIN);
ws->state = WS_STATE_CLOSED;
}
 
// close connection
if (ws->close_cb) {
ws->close_cb(ws, status_code, reason);
}
}


参考地址：
WebSocket

扫一扫，分享到微信

微信分享二维码
× 文章目录
  1. 1. WebSocket 简介
    1. 1.1. 起源
    2. 1.2. 轮询和WebSocket查询
  2. 2. WebSocket协议原理
iOS 开发者<br><br>一位拥有梦想，脚踏实地的 90 后<br> <br>Good luck~